import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message
  } from 'antd'
  import { PlusOutlined } from '@ant-design/icons'
  import { Link, useSearchParams } from 'react-router-dom'
  import './index.scss'
  import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import {  useEffect, useRef, useState } from 'react'
import { addArticleAPI,getArticleDetail,putArticleAPI} from '@/apis/article'
import { useChannel } from '@/hooks/useChannels'
  const { Option } = Select
  
  const Publish = () => {
    //1.获取频道列表
    const {channelList}=useChannel()
    //2.提交表单
    const formRef=useRef()
    const onFinish=async(formValues)=>{
        //校验类型
        if(imageList.length !==imageType){
            return message.warning('封面类型与数量不匹配')
        }
        const {title,content,channel_id}=formValues
        const resData={
            title,
            content,
            cover:{
                type:imageType,
                images:imageList.map(item=>{
                  if(item.response){
                    return item.response.data.url
                  }else{
                    return item.url
                  }
                })
            },
            channel_id
        }
        if(articleId){
          await putArticleAPI({...resData,id:articleId})
          message.success('更新成功')
        }else{
          await addArticleAPI(resData)
          message.success('新增成功')
        }
        formRef.current.resetFields()
    }
    
    // 3.上传回调
    const [imageList,setImageList]=useState([])
    const onChange=(value)=>{
        setImageList(value.fileList)
    }

    //4.切换图片类型
    const [imageType,setImageType]=useState(1)
    const onTypeChange=(e)=>{
        console.log('切换页面了',e.target.value);
        setImageType(e.target.value)
    }

    //回填数据
    const [searcParams]=useSearchParams()
    const articleId=searcParams.get('id')
    const [form]=Form.useForm()
    console.log(articleId);
    useEffect(()=>{
     const getArticleDetailData=async()=>{
      const res=await getArticleDetail(articleId)
      const {type,images} =res.data.data.cover
      form.setFieldsValue({
        ...res.data.data,
        type,      
      })
      setImageType(type)
      setImageList(images.map(url=>{
        return {url}
      }))
     }
     if(articleId){
      getArticleDetailData()
     }
    },[articleId,form])
    return (
      <div className="publish">
        <Card
          title={
            <Breadcrumb items={[
              { title: <Link to={'/'}>首页</Link> },
              { title: articleId ? '编辑文章': '发布文章'},
            ]}
            />
          }
        >
          <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ type: 1 }}
            onFinish={onFinish}
            ref={formRef}
            form={form}
          >
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: '请输入文章标题' }]}
            >
              <Input placeholder="请输入文章标题" style={{ width: 400 }} />
            </Form.Item>
            <Form.Item
              label="频道"
              name="channel_id"
              rules={[{ required: true, message: '请选择文章频道' }]}
            >
              <Select placeholder="请选择文章频道" style={{ width: 400 }}>
               {channelList?.map(item=>
                 <Option key={item.id} value={item.id}>{item.name}</Option>
               )}
              </Select>
            </Form.Item>
            <Form.Item label="封面">
                <Form.Item name="type">
                    <Radio.Group onChange={onTypeChange}>
                    <Radio value={1}>单图</Radio>
                    <Radio value={3}>三图</Radio>
                    <Radio value={0}>无图</Radio>
                    </Radio.Group>
                </Form.Item>
                {imageType > 0 &&  <Upload
                    name='image'
                    listType="picture-card"
                    showUploadList
                    action={'http://geek.itheima.net/v1_0/upload'}
                    onChange={onChange}
                    maxCount={imageType}
                    fileList={imageList}
                >
                    <div style={{ marginTop: 8 }}>
                    <PlusOutlined />
                    </div>
                </Upload>}
                </Form.Item>
            <Form.Item
              label="内容"
              name="content"
              rules={[{ required: true, message: '请输入文章内容' }]}
            >
                   <ReactQuill
          className="publish-quill"
          theme="snow"
          placeholder="请输入文章内容"
        />
            </Form.Item>
  
            <Form.Item wrapperCol={{ offset: 4 }}>
              <Space>
                <Button size="large" type="primary" htmlType="submit" >
                  发布文章
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
  
  export default Publish